<template>
  <Fieldset legend="General" :toggleable="true">
    <section class="flex justify-between items-center mb-4">
      <div class="flex gap-2 items-center">
        <span class="text-sm">Primary</span>
        <input
          :value="(previewColors || themeStore.TempTheme.semantic.primary)['500']"
          @input="e => onPrimaryColorChange(e)"
          @change="e => onPrimaryColorChangeEnd(e)"
          type="color"
        />
      </div>
      <DesignColorPalette :value="previewColors || themeStore.TempTheme.semantic.primary" />
    </section>

    <section class="grid grid-cols-4 gap-2 mb-3">
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.transitionDuration" label="Transition Duration" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.disabledOpacity" label="Disabled Opacity" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.iconSize" label="Icon Size" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.anchorGutter" label="Anchor Gutter" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.content.borderRadius" label="Border Radius" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField
          v-model="themeStore.TempTheme.semantic.mask.transitionDuration"
          label="Mask Transition Dur."
        />
      </div>
      <div class="flex flex-col gap-1"></div>
      <div class="flex flex-col gap-1"></div>
    </section>

    <div class="mb-1 text-sm font-semibold text-surface-950 dark:text-surface-0">Focus Ring</div>
    <section class="grid grid-cols-4 gap-2">
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.focusRing.width" label="Width" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.focusRing.style" label="Style" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.focusRing.color" label="Color" type="color" />
      </div>
      <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.focusRing.offset" label="Offset" />
      </div>
      <!-- <div class="flex flex-col gap-1">
        <DesignTokenField v-model="themeStore.TempTheme.semantic.focusRing.shadow" label="Shadow" />
      </div> -->
    </section>
  </Fieldset>
</template>

<script setup lang="ts">
  import { watch, ref } from 'vue'
  import { useThemeStore } from '@/stores/useThemeStore'
  import DesignTokenField from '../base/DesignTokenField.vue'
  import DesignColorPalette from '../primitive/DesignColorPalette.vue'
  import { palette } from '@primevue/themes'

  const themeStore = useThemeStore()

  const previewColors = ref<Record<string, any>>({ ...themeStore.TempTheme.semantic.primary })

  const onPrimaryColorChange = (event: Event) => {
    const inputElement = event.target as HTMLInputElement
    if (inputElement.value) {
      previewColors.value = palette(inputElement.value)
    }
  }

  const onPrimaryColorChangeEnd = (event: Event) => {
    const color = (event.target as HTMLInputElement).value
    // @ts-ignore
    themeStore.TempTheme.semantic.primary = palette(color)
  }

  // 监听变化并预览
  watch(
    () => themeStore.TempTheme,
    () => {
      themeStore.PreviewTheme()
    },
    { deep: true }
  )
</script>

<style scoped></style>
